<template lang="">
    <div class="main">
        <van-nav-bar :title="research.title" />
        <van-tabs v-model:active="tab" @click-tab="onClickTab">
            <van-tab title="项目一览" name="base"></van-tab>
            <van-tab title="治疗方案" name="solution"></van-tab>
            <van-tab title="入组患者" name="patient"></van-tab>
            <van-tab title="参研人员" name="doc"></van-tab>
        </van-tabs>

        <div class="ky-top">
            <van-image  width="100" height="100" src="/static/img/research.png" />
            <div class="top-right">
                <div>科研者:{{research.researcher}}</div>
                <div>{{research.researcher_org}}</div>
            </div>
        </div>
        <div class="ky-base">
            <div class="ky-title">项目概况</div>
            <div class="ky-content">
                <div class="ky-item">
                    <div class="item-left">主办机构</div>
                    <div>{{research.org}}</div>
                </div>
                <div class="ky-item">
                    <div class="item-left">项目发起</div>
                    <div>{{research.start_people}}</div>
                </div>
                <div class="ky-item">
                    <div class="item-left">入组患者</div>
                    <div>{{research.patient_nums}}</div>
                </div>
                <div class="ky-item">
                    <div class="item-left"> 项目状态</div>
                    <div>{{research.status == 1 ? '待审核' : '开放中'}}</div>
                </div>
                <div class="ky-item">
                    <div class="item-left">项目目的</div>
                    <div class="ky-purpose">{{research.purpose}}</div>
                </div>
            </div>
        </div>
        <div class="ky-file">
            <div class="ky-title">相关文件</div>
            <div class="ky-content">
                <div v-for="(item, index) in research.files" :key="index">
                    {{item}}
                </div>
            </div>
        </div>

        <div class="ky-btn-box">
            <div class="ky-btn" @click="createProjectDoc(research.doc_status)">{{ status[research.doc_status]}} </div>
        </div>
    </div>
</template>
<script>
import { ref, reactive,onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getResearchDetail,makeDocProject} from "../api/index"
import { getUserInfo, log, LOCAL_USER } from "../utils/user"
import { showToast, showConfirmDialog } from 'vant';
export default {
    setup() {
        const router = useRouter()
        const route = useRoute()
        const userInfo = getUserInfo();
        let id = 0;
        const status = {
            100 : '提交申请',
            0: '等待审核',
            1: '查看统计'
        }
        const research = reactive({
            id:0,
            title:"",
            purpose:"",
            org:"",
            start_people:"",
            status:"",
            research_nums:"",
            patient_nums:"",
            files:"",
            researcher:"",
            researcher_img:"",
            researcher_org:"",
            doc_status:-2
        })
        const getData = () => {
            getResearchDetail({id:id}).then(res => {
               log("dwd",res)
               if(res.status == 'ok'){
                    research.title = res.data.title;
                    research.purpose = res.data.purpose;
                    research.org = res.data.org;
                    research.start_people = res.data.start_people;
                    research.status = res.data.status;
                    research.research_nums = res.data.research_nums;
                    research.patient_nums = res.data.patient_nums;
                    research.files = res.data.files.split(",");
                    research.researcher = res.data.researcher;
                    research.researcher_img = res.data.researcher_img;
                    research.researcher_org = res.data.researcher_org;
                    research.doc_status = res.data.doc_status;
               }else{
                showToast(res.msg)
               }
            })
        }
        onMounted(() => {
            id = route.params.id ? route.params.id : 0
            if(!id){
                router.push("/MyKy")
            }else{
                getData()
            }
        })
        const tab = ref('base')
        const onClickTab = ({ title,name }) => {
            if(name == 'solution'){
                router.push("/KySolution/"+id)
            }
            if(name == 'patient'){
                router.push("/KyPatient/"+id)
            }
            if(name == 'doc'){
                router.push("/KyDoc/"+id)
            }
        };
        const otherProject = () => {
            router.push("/OtherKy")
        }
        const goToDetail = (id) => {
            router.push("/KyDetail/"+id)
        }
        const createProjectDoc = status => {
            if(status == -1){
                makeDocProject({id:id}).then(res => {
                    if(res.status == 'ok'){
                        getData()
                    }
                    showToast(res.msg);
                })
            }
        }
        return {
            tab,
            onClickTab,
            research,
            otherProject,
            goToDetail,
            createProjectDoc,
            status
        }
    }
}
</script>
<style scoped>
    .ky-top{
        margin-top: 10px;
        padding:15px;
        border-top: 1px solid #E7E7E7;

        display: flex;
        align-items: center;
    }
    .top-right{
        margin-left: 20px;
        font-size: 16px;
        font-weight: 250;
        color: #1C2023;
    }
    .ky-base{
        padding: 15px;
    }
    .ky-title{
        margin-bottom: 10px;
    }
    .ky-content{
        background: #F5F7FB;
        padding: 15px;
    }
    .ky-item{
        display: flex;
        margin-bottom: 10px;
        color: #606972;
        font-weight: 250;
    }
    .item-left{
        width: 25%;
        margin-right: 10px;
    }
    .ky-purpose{
        width: 75%;
    }
    .ky-file{
        padding: 15px;
    }
    .ky-btn-box{
        padding: 15px;
        text-align: center;
    }

    .ky-btn{
        background: #0052D9;
        color: #FFFFFF;
        height: 4vh;
        line-height: 2;
        border-radius: 15px;
    }
</style>